<template>
  <div id="info">
    <div style="font-size: 22rem;margin-top: 40rem">修改个人信息</div>
    <div>
      <van-cell-group style="margin-top: 40rem">
        <van-field v-model="info.name" label="姓名" placeholder="请输入姓名"/>
      </van-cell-group>
      <van-cell-group>
        <van-field v-model="info.phone" label="手机号" placeholder="请输入手机号"/>
      </van-cell-group>
      <van-cell-group>
        <van-field v-model="info.password" label="密码" placeholder="请输入密码"/>
      </van-cell-group>
      <van-cell-group>
        <van-field name="radio" label="性别：">
          <template #input>
            <van-radio-group v-model="info.gender" direction="horizontal" checked-color="#07c160">
              <van-radio :name="1">男</van-radio>
              <van-radio :name="0">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>
      </van-cell-group>
      <van-cell-group>
        <van-field v-model="info.address" label="地址" placeholder="请输入地址"/>
      </van-cell-group>
    </div>
    <van-button type="primary" style="width:300rem;height: 38rem;margin-top: 20rem" @click="save">保存</van-button>
  </div>
</template>

<script>
import {Notify} from "vant";

export default {
  name: "Info",
  data() {
    return {
      info: {
        id: "",
        name: "",
        phone: "",
        password: "",
        gender: 1,
        address: "",
      }
    }
  },
  created() {
    this.info = this.$route.params.userInfo
  },
  methods: {
    save() {
      this.$http.post("/api/updateUserInfo", this.info).then(function (data) {
        if (data.code === 0) {
          Notify({type: 'success', message: '修改成功'});
        } else {
          Notify({type: 'warning', message: '修改失败：' + data.msg});
        }
      })
    }
  }
}
</script>

<style scoped>
#info {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  align-items: center;
}
</style>
